<template>
  <div class="order-list">
    <div class="menu-box">
      <div class="main">
        <div
          class="item"
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ active: index == specsIndex }"
          @click="onSpecsIndex(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <div class="list-box">
      <a
        :url="'/pages/order/orderPaid?id=' + item.order_no"
        class="item"
        v-for="(item, index) in list"
        :key="index"
        hover-class="none"
      >
        <div class="top">
          <div class="left">
            <div class="pic">
              <img :src="item.merchant.logo" class="img-size-100" />
            </div>
            <div class="name">{{ item.merchant.name }}</div>
          </div>
          <div
            class="tips"
            :class="[item.state == 0 ? 'red' : item.state == 1 ? 'blue' : '']"
          >
            {{ orderState[item.state] }}
          </div>
        </div>
        <div class="info">
          <div class="pic">
            <img :src="item.product_cover_picture" class="img-size-100" />
          </div>
          <div style="flex:1">
            <div class="name">{{ item.product_title }}</div>
            <div class="specification">
              {{ item.product_specification_title }}
            </div>
          </div>
          <div class="price">
            <div class="money">
              <!-- <text>美粉币</text> -->
              <text class="number">{{ item.product_sku_price_name }}</text>
            </div>
            <div class="amount">x{{ item.product_number }}</div>
          </div>
        </div>
        <div class="total-tips">
          共{{ item.product_number }}件商品 ，合计 美粉币<text class="number">{{
            item.amount_paid_name
          }}</text
          ><text v-if="item.freight > 0">(含运费:{{ item.freight_name }})</text>
        </div>
        <div class="btn-box" v-if="item.state == 0">
          <div class="btn" @click.stop="callOrder(item.order_no, index)">
            取消订单
          </div>
          <div class="btn pay">
            去付款
          </div>
        </div>
        <div class="btn-box" v-if="item.state == 2">
          <div class="btn pay" v-if="item.delivery_state == 0">
            去核销
          </div>
          <div
            class="btn pay"
            v-if="item.delivery_state == 2"
            @click.stop="onReceipt(item.order_no, item.pay_type)"
          >
            确认收货
          </div>
        </div>
      </a>
    </div>
    <base-empty v-if="total == 0" />
    <uni-load-more
      :status="status"
      :icon-size="12"
      :content-text="contentText"
      v-if="total > 5"
    />
  </div>
</template>

<script>
import shbPay from "@/common/shb-pay.js";
import uniLoadMore from "@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue";
export default {
  components: { uniLoadMore },
  data() {
    return {
      specsIndex: 0,
      tabList: ["全部", "待付款", "待确认", "订单完成", "已关闭"],
      orderState: {
        0: "待付款",
        1: "待发货",
        2: "待确认",
        3: "订单完成",
        4: "订单关闭"
      },
      list: [],
      currentPage: 0,
      total: 10,
      pageSize: 15,
      status: "more",
      contentText: {
        contentdown: "上拉加载更多",
        contentrefresh: "加载中...",
        contentnomore: "没有更多了"
      },
      wxMerchId: ''
    };
  },
  onLoad(options) {
    this.specsIndex = options.type || 0;
  },
  onShow() {
    this.listDataInit();
    this.$api.getWxMerchId().then((data) => {
      this.wxMerchId = data.data;
    });
  },
  onReachBottom() {
    this.getOrderList();
  },
  methods: {
    onReceipt(order_no, pay_type) {
      // if(pay_type != 2){
        uni.showModal({
          title: "提示",
          content: "是否确认收货?",
          success: res => {
            if (res.confirm) {
              this.$api.postOrderConfirm({ order_no }).then(data => {
                if (data.code == 200) {
                  this.listDataInit();
                }
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          }
        });
      // }else{
      //  //拉起确认收货组件
      //   if (wx.openBusinessView) {
      //     wx.openBusinessView({
      //       businessType: 'weappOrderConfirm',
      //       extraData: {
      //         merchant_id: this.wxMerchId,
      //         merchant_trade_no: order_no,
      //         // transaction_id: ''
      //       },
      //       success() {
      //         uni.showLoading({
      //           title: "确认中",
      //           mask: true,
      //         });
      //         setTimeout(() => {
      //           uni.hideLoading();
      //           this.listDataInit();
      //         }, 1500);
      //       },
      //       fail() {
      //         //dosomething
      //       },
      //       complete() {
      //         //dosomething
      //       }
      //     });
      //   } 
      // }
    },
    listDataInit() {
      this.currentPage = 0;
      this.total = 10;
      this.getOrderList();
    },
    callOrder(order_no, index) {
      uni.showModal({
        title: "提示",
        content: "您确定要取消吗？",
        success: res => {
          if (res.confirm) {
            this.$api.postOrderCancel({ order_no }).then(res => {
              if (res.code == 200) {
                this.listDataInit();
                uni.showToast({
                  title: "订单已取消",
                  duration: 2000,
                  icon: "none"
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        }
      });
    },
    onSpecsIndex(index) {
      this.specsIndex = index;
      this.listDataInit();
    },
    getOrderList() {
      if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
        this.status = "noMore";
        return;
      }
      this.status = "loading";
      return this.$api
        .getOrderList({
          type: this.specsIndex,
          pageSize: this.pageSize,
          page: this.currentPage + 1
        })
        .then(res => {
          if (res.code == 200) {
            this.total = res.data.total;
            this.currentPage++;
            if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
              this.status = "noMore";
            } else {
              this.status = "more";
            }
            if (this.currentPage == 1) {
              this.list = [];
            }
            this.list = this.list.concat(res.data.data);
          }
        });
    }
  }
};
</script>

<style lang="scss">
.order-list {
  min-height: 100vh;
  padding: 30rpx;
  background: #f4f4f4;
  color: #333333;
  font-size: 26rpx;
  overflow: hidden;
  box-sizing: border-box;
  .img-size-100 {
    widows: 100%;
    height: 100%;
    object-fit: cover;
  }
  .menu-box {
    height: 105rpx;
    .main {
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 75rpx;
      display: flex;
      overflow: hidden;
      justify-content: center;
      background: #f4f4f4;
      padding-top: 30rpx;
      .item {
        font-size: 28rpx;
        // font-weight: 500;
        height: 75rpx;
        line-height: 75rpx;
        box-sizing: border-box;
        flex: 1;
        text-align: center;
        margin: 0 18rpx;
        &.active {
          color: #1772ff;
          border-bottom: 2px solid #1772ff;
        }
      }
    }
  }
  .list-box {
    overflow: hidden;
    .item {
      background: #fff;
      overflow: hidden;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
      padding: 0 20rpx 30rpx;
      .top {
        height: 56rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        color: #333333;
        .left {
          display: flex;
          width: 440rpx;
          align-items: center;
          .pic {
            flex: 0 0 56rpx;
            height: 56rpx;
            border-radius: 50%;
            overflow: hidden;
          }
          .name {
            max-width: 320rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 0 10rpx 0 20rpx;
            font-size: 32rpx;
            background: url(https://media.wxcwy.com/mini/images/more_arrow@2x.png) no-repeat right
              center;
            background-size: 25rpx 30rpx;
            padding-right: 30rpx;
          }
        }
        .tips {
          flex: 0 0 120rpx;
          font-size: 28rpx;
          &.blue {
            color: #1772ff;
          }
          &.red {
            color: #ee4130;
          }
        }
      }
      .info {
        overflow: hidden;
        display: flex;
        .pic {
          flex: 0 0 160rpx;
          height: 160rpx;
          border-radius: 8rpx;
          overflow: hidden;
        }
        .name {
          flex: 0 0 300rpx;
          margin: 0 18rpx;
          line-height: 36rpx;
          height: 72rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .specification {
          color: #999;
          font-size: 24rpx;
          line-height: 32rpx;
          margin-top: 12rpx;
          padding: 0 18rpx;
        }
        .price {
          height: 36rpx;
          line-height: 36rpx;
          flex: 0 0 130rpx;
          text-align: right;
          .money {
            font-size: 24rpx;
            .number {
              font-size: 32rpx;
            }
          }
          .amount {
            line-height: 32rpx;
            color: #999999;
            font-size: 24rpx;
          }
        }
      }
      .total-tips {
        margin-top: 20rpx;
        font-size: 24rpx;
        line-height: 32rpx;
        overflow: hidden;
        text-align: right;
        .number {
          font-size: 32rpx;
        }
      }
      .btn-box {
        margin-top: 30rpx;
        // height: 60rpx;
        display: flex;
        justify-content: flex-end;
        .btn {
          width: 170rpx;
          height: 60rpx;
          line-height: 60rpx;
          border-radius: 30rpx;
          border: 1px solid #999999;
          text-align: center;
          margin-left: 20rpx;
          &.pay {
            border-color: #1772ff;
            color: #1772ff;
            font-size: 32rpx;
          }
        }
      }
    }
  }
}
</style>
